import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() => runApp(RootApp());

// 定义根目录Wigdget
class RootApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 根视图
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.white),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  TapGestureRecognizer _gestureRecognizer1;
  TapGestureRecognizer _gestureRecognizer2;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _gestureRecognizer1 = new TapGestureRecognizer();
    _gestureRecognizer2 = new TapGestureRecognizer();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: buildAppBar(),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: Column(
          children: [
            SizedBox(
              height: 44,
            ),
            Image.asset("images/3.0/logo.jpg", width: 60, height: 60),
            SizedBox(
              height: 24,
            ),
            Text(
              "欢迎登录，精彩每一天",
              style: TextStyle(fontSize: 22),
            ),
            Container(
              margin: EdgeInsets.only(top: 64),
              width: 220,
              height: 44,
              child: RaisedButton(
                color: Colors.blue,
                child: Text("手机号一键登录"),
                textColor: Colors.white,
                onPressed: () {
                  print("点击了手机号一键登录");
                },
              ),
            ),
            SizedBox(
              height: 24,
            ),
            buildRichText(),
            Expanded(
              child: Container(
                margin: EdgeInsets.only(bottom: 50),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    CustomOvalButton(
                      iconData: Icons.account_box,
                      clickCallBack: () {
                        print("点击了图标");
                      },
                    ),
                    SizedBox(width: 10),
                    CustomOvalButton(
                      iconData: Icons.android_rounded,
                      clickCallBack: () {
                        print("点击了图标");
                      },
                    ),
                    SizedBox(width: 10),
                    CustomOvalButton(
                      iconData: Icons.more_horiz,
                      clickCallBack: () {
                        print("点击了图标");
                      },
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  RichText buildRichText() {
    return RichText(
      text: TextSpan(
        text: "用户协议",
        style: TextStyle(color: Colors.grey),
        children: [
          TextSpan(
            text: '用户协议',
            style: TextStyle(color: Colors.blue),
            recognizer: _gestureRecognizer1
              ..onTap = () {
                print("点击了用户协议");
              },
          ),
          TextSpan(
            text: '和',
            style: TextStyle(color: Colors.grey),
          ),
          TextSpan(
            text: '隐私协议',
            style: TextStyle(color: Colors.blue),
            recognizer: _gestureRecognizer2
              ..onTap = () {
                print("点击了隐私协议");
              },
          ),
        ],
      ),
    );
  }

  AppBar buildAppBar() {
    return AppBar(
      elevation: 0.0,
      leading: IconButton(
        onPressed: () {
          print("点击返回");
        },
        icon: Icon(
          Icons.arrow_back_ios_outlined,
        ),
      ),
      actions: [
        FlatButton(
            onPressed: () {
              print("点击 登录遇到问题");
            },
            child: Text("登录遇到问题"))
      ],
    );
  }
}

class CustomOvalButton extends StatefulWidget {
  final IconData iconData;
  final Function() clickCallBack;

  CustomOvalButton({@required this.iconData, this.clickCallBack, Key key})
      : super(key: key);

  @override
  _CustomOvalButtonState createState() => _CustomOvalButtonState();
}

class _CustomOvalButtonState extends State<CustomOvalButton> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      // 点击事件响应范围
      borderRadius: BorderRadius.all(
        Radius.circular(30),
      ),
      onTap: widget.clickCallBack,
      child: Container(
        width: 50,
        height: 50,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey),
          borderRadius: BorderRadius.all(
            Radius.circular(30),
          ),
        ),
        child: Icon(widget.iconData, color: Colors.black87),
      ),
    );
  }
}
